<template>
  <div class="content">
    <div id="big_calendar" class="calendar-wrapper">
      <btg-calendar
        ref="calendar"
        :options="calendarOptions"
        :refresh-func="fetchTickets"
        @clickDate="clickDate"
        @changeTicketCode="changeTicketCode"
      />
    </div>
  </div>
</template>

<script>
import BtgCalendar from 'btgcalendar'
import { getTicket } from '@/api/travel'

export default {
  name: 'Calendar',
  components: { BtgCalendar },
  data() {
    return {
      calendarOptions: {
        type: 'large', // [large, small]
        ticketsData: {},
        ticketCode: '',
        updateTitle: '最近一次UBR数据同步时间：',
        insetHeight: 180,
        priceColor: [
          {
            value: -1, // -1 会解析成无穷大，或者设置一个合适的阈值，实际数量小于value就显示value的color
            type: 'price' // 可以设置type， 预设 price，如果不满足则自定义颜色
          }
        ],
        availableColor: [
          {
            value: 2000,
            type: 'low'
            // backgroundColor: '#FEF0F0', // 或者自定义颜色
            // borderColor: '#FBC4C4',
            // textColor: '#FF6F5B'
          },
          {
            value: 10000,
            type: 'mid'
            // backgroundColor: '#FEF0F0', // 或者自定义颜色
            // borderColor: '#FBC4C4',
            // textColor: '#FF6F5B'
          },
          {
            value: 10000,
            type: 'high'
            // backgroundColor: '#ECF8F2',
            // borderColor: '#97D2B4',
            // textColor: '#42B983'
          }
        ],
        enableRefresh: true, // 是否需要刷新按钮， default true
        enableSelect: true, // 是否需要条件选择器， default true
        isHoverEvent: true, // 鼠标移动到日期上，如果有事件，是否需要显示，default true
        typeMap: {} // 类型map，可不传
      },
      ticketCode: ''
    }
  },
  computed: {
    sidebar() {
      return this.$store.getters.sidebar.opened
    }
  },
  watch: {
    sidebar() {
      console.log('触发刷新')
      setTimeout(() => { this.$refs.calendar.render() }, 280)
      console.log('render', this.$refs.calendar.render)
      console.log('calendar', this.$refs.calendar)
    }
  },
  mounted() {
    console.log(this.$refs.calendar.render)
  },
  methods: {
    getTicket() {
      getTicket().then((res) => {
        this.calendarOptions.ticketsData = res.data.data
        this.calendarOptions.ticketCode = Object.keys(
          this.calendarOptions.ticketsData.products
        )[0]
        this.ticketCode = this.calendarOptions.ticketCode
        localStorage.setItem(
          'ticketsData',
          JSON.stringify(this.calendarOptions.ticketsData)
        )

        this.calendarOptions.typeMap = JSON.parse(
          localStorage.getItem('init')
        ).ticket
        // localStorage.setItem('products', JSON.stringify(this.calendarOptions.ticketsData.products[0]))
        //
        //
      })
    },
    fetchTickets() {
      this.getTicket()
    },
    clickDate(event) {
      //
      const newTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
        this.calendarOptions.ticketsData.dataGetDateTime
      )[0]

      // === event.datetime
      var formatDate1 = new Date(newTime)
      var formatDate2 = new Date(event.dateTime)

      if (formatDate1 > formatDate2) {
        return this.$message({
          showClose: true,
          message: '请选择大于或等于当前日期的时间段',
          duration: 3000,
          type: 'warning'
        })
      } else if (event.event === null) {
        return this.$message({
          showClose: true,
          message: '该日期暂时没有数据，请选择其他日期',
          duration: 3000,
          type: 'warning'
        })
      } else {
        localStorage.setItem('event', JSON.stringify(event.event))
        //
        localStorage.setItem(
          'products',
          JSON.stringify(
            this.calendarOptions.ticketsData.products[this.ticketCode]
          )
        )
        this.$router.push({
          name: 'issue',
          query: { event: event, ticketCode: this.ticketCode }
        })
      }
    },
    changeTicketCode(value) {
      this.ticketCode = value
      // this.calendarOptions.ticketCode = value
      //
      // this.calendarOptions.ticketCode = value
    }
  }
}
</script>

<style lang="scss">
.content{
  padding: 24px;
  min-width: 1366px;
}
.calendar-wrapper {
  height: calc(100% - 500px);
  min-height: 370px;
}
</style>
